Map with images

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<set $map to [[0,0,0,0,0,0,0,0,0,0,0], [0,1,1,1,0,3,1,1,1,1,0], [0,0,0,1,0,0,0,0,0,1,0], [0,1,0,1,1,1,1,1,0,1,0], [0,1,0,0,0,0,0,1,0,1,0], [0,1,1,1,1,1,1,1,0,1,0], [0,0,0,0,0,0,0,1,0,1,0], [0,1,0,1,1,1,1,1,1,1,0], [0,1,0,1,0,0,0,1,0,0,0], [0,1,1,1,0,1,1,1,1,1,0], [0,0,0,0,0,0,0,0,0,0,0]]>>\ <<set $px to 9>><<set $py to 9>>\ <div id="map"></div>\ <<done>><<update>><</done>>\ <<link "North">><<if $px gt 1 and $map[$px-1][$py] is 1>><<set $map[$px][$py] to 1>><<set $px-->><<update>><</if>><</link>> <<link "South">><<if $px lt 10 and $map[$px+1][$py] is 1>><<set $map[$px][$py] to 1>><<set $px++>><<update>><</if>><</link>> <<link "East">><<if $py lt 10 and $map[$px][$py+1] is 1>><<set $map[$px][$py] to 1>><<set $py++>><<update>><</if>><</link>> <<link "West">><<if $py gt 1 and $map[$px][$py-1] is 1>><<set $map[$px][$py] to 1>><<set $py-->><<update>><</if>><</link>> [[Code]]

data:image/gif;base64,R0lGODlhIAAgAPAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtJbWFnZU1hZ2ljaw5nYW1tYT0wLjQ1NDU0NQAh+QQJMgABACwAAAAAIAAgAAACboyPqcsN/5pcsM4bqsYywgxwTpgZkUhpH5qoFmu6Kit/L1aTM567vO/ZdWwk0GEzsfRujFstVmyuoM5pauoDWVvIp5B7oiK1UcQ4Ry4fX5ueqMtEwbecc7zOvP/K+ku8n7QFOBRGBSP05YeYeFAAACH/C0ltYWdlTWFnaWNrDmdhbW1hPTAuNDU0NTQ1ACH5BAkyAAEALAAAAAAgACAAAAJtjI+py+3/gJSwhomtw1wzOl2At1CXYZIIl6kH26owTM5hDNmjiG86nZuJeL3SbTdEFRUZHTFosimRjRiQB0Vel6umsFPtSMGf0JTGPY/E0rBQnWbi4u7UU2Z+5T09etl+V7MXqMGi59dFdpVQAAA7

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEXd3Nz///8r/gRVAAAAAXRSTlMAQObYZgAAAAFiS0dEAf8CLd4AAAAJcEhZcwAALEsAACxLAaU9lqkAAAAHdElNRQflChoHFCYGpcvmAAAADElEQVQI12NgGNwAAACgAAFhJX1HAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTEwLTI2VDA3OjIwOjIzKzAwOjAwr6xiLgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0xMC0yNlQwNzoyMDoyMyswMDowMN7x2pIAAAAASUVORK5CYII=

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAM9JREFUWEftllkOwCAIROv9D91GUwzFwT1qGvpl3HgdGNVdmz/3xr93cXAAahOLh/J9BEdtbR7/h+q1EkAqgcY1KLQWwX/mrQBAwFGtmhQgaXNy0xiqryR9WhHyfFM+/ca53Gop4Apw8NC/AsAHRRAJQIsLap1RnHfUObDlLDpKAVkDJUV41beuJUeF6uT2KgWV/ueeR/dJ1oJkDwOYpUBL+qwGYnH+ygVba6A1eNWDRNtUvgm6g/ccRPJ6HQreA4BeRUMQs1zQDWEApoAp8AATA4YCmT0FvwAAAABJRU5ErkJggg==

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACVBMVEXd3NwPCQ//////YaMsAAAAAXRSTlMAQObYZgAAAAFiS0dEAmYLfGQAAAAJcEhZcwAALEsAACxLAaU9lqkAAAAHdElNRQflChoHFCYGpcvmAAAAJElEQVQY02MIhQIGfAwGMCDACIVReBhAMxmowSDKLsJuJux3AOemL9F0C9ZRAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTEwLTI2VDA3OjIwOjIzKzAwOjAwr6xiLgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0xMC0yNlQwNzoyMDoyMyswMDowMN7x2pIAAAAASUVORK5CYII=

<<widget "update">>\ <<replace #map>>\ <<for $x to 0; $x lt 10; $x++>>\ <<for $y to 0; $y lt 10; $y++>>\ <<set $map[$px][$py] to 2>>\ <<switch $map[$x][$y]>>\ <<case 0>><img data-passage="block.png">\ <<case 1>><img data-passage="empty.png">\ <<case 2>><img data-passage="alien.gif">\ <<case 3>><img data-passage="snack store.png">\ <</switch>>\ <</for>>\ <br>\ <</for>>\ <</replace>>\ <</widget>>

<<run UIBar.destroy()>>

Initial passage: {{{ <<set $map to [[0,0,0,0,0,0,0,0,0,0,0], [0,1,1,1,0,3,1,1,1,1,0], [0,0,0,1,0,0,0,0,0,1,0], [0,1,0,1,1,1,1,1,0,1,0], [0,1,0,0,0,0,0,1,0,1,0], [0,1,1,1,1,1,1,1,0,1,0], [0,0,0,0,0,0,0,1,0,1,0], [0,1,0,1,1,1,1,1,1,1,0], [0,1,0,1,0,0,0,1,0,0,0], [0,1,1,1,0,1,1,1,1,1,0], [0,0,0,0,0,0,0,0,0,0,0]]>>\ <<set $px to 9>><<set $py to 9>>\ <div id="map"></div>\ <<done>><<update>><</done>>\ <<link "Norte">><<if $px gt 1 and $map[$px-1][$py] is 1>><<set $map[$px][$py] to 1>><<set $px-->><<update>><</if>><</link>> <<link "Sul">><<if $px lt 10 and $map[$px+1][$py] is 1>><<set $map[$px][$py] to 1>><<set $px++>><<update>><</if>><</link>> <<link "Oeste">><<if $py gt 1 and $map[$px][$py-1] is 1>><<set $map[$px][$py] to 1>><<set $py-->><<update>><</if>><</link>> <<link "Leste">><<if $py lt 10 and $map[$px][$py+1] is 1>><<set $map[$px][$py] to 1>><<set $py++>><<update>><</if>><</link>> }}} The "update" widget (must be in a "widget" tagged passage) {{{ <<widget "update">>\ <<replace #map>>\ <<for $x to 0; $x lt 10; $x++>>\ <<for $y to 0; $y lt 10; $y++>>\ <<set $map[$px][$py] to 2>>\ <<switch $map[$x][$y]>>\ <<case 0>><img data-passage="block.png">\ <<case 1>><img data-passage="empty.png">\ <<case 2>><img data-passage="alien.gif">\ <<case 3>><img data-passage="snack store.png">\ <</switch>>\ <</for>>\ <br>\ <</for>>\ <</replace>>\ <</widget>> }}} Stylesheet: {{{ #map { line-height: 0; border: 1px dotted; width: 50vh; } img { width: auto; height: 5vh; } #story { margin: auto; } body { color: #111; background-color: #fff; } }}} Based on [[Moving through a dungeon|https://twinery.org/cookbook/dungeonmoving/sugarcube/sugarcube_dungeonmoving.html]] from the Twine Cookbook. This example uses [[media passages|https://motoslave.net/sugacube/2/docs/#guide-media-passages]] created with [[Twine Enhancer|https://github.com/hogart/twine-enhancer]]. [[Voltar|Mapa]]